<template>
<div class="pageContainer">
    <!--包裹信息-->
    <el-row class="orderDetails">
        <div style="border:1px solid #ccc;margin-bottom:20px">
            <template>
                <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;border-bottom:1px solid #ccc">
                    <span>包裹</span>
                </div>
                <!--商品信息-->
                <div style="text-align:left">
                    <el-table   :data="data1" style="width: 100%"  align="center" header-align="center" :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
                        <el-table-column type="index" label="行号" width="180"></el-table-column>
                        <el-table-column prop="tradeName" label="商品名称"></el-table-column>
                        <el-table-column prop="tradeNumber" label="商品编码"></el-table-column>
                        <el-table-column prop="specificationProperties" label="规格属性"></el-table-column>
                        <el-table-column prop="merchantCode" label="商户内码"></el-table-column>
                        <el-table-column prop="mainUnit" label="主计量单位"></el-table-column>
                        <el-table-column prop="purchaseQuantity" label="购买数量"></el-table-column>
                        <el-table-column prop="shipmentQuantity" label="发货数量"></el-table-column>
                    </el-table>
                    <!-- :tableHeaderList="tableHeaderList"       :tableList="logisticsProductData"-->
                    <!-- <jic-table :height="350" :operationWidth="300" :showSelection="false"   :showOperation="false" :showBatchDelete="false"></jic-table> -->
                </div>
                 <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;border-bottom:1px solid #ccc">
                    <span>进度详情</span>
                </div>
                 <div style="text-align:left;height:400px;padding-top:30px" >
                     <el-row :gutter="20">
                        <el-col :span="6" style="padding-left: 100px;text-align: left;">
                           <p>包裹编号：BGBH0001</p><br>
                           <p>配送商：顺风速递</p><br>
                           <p>运单号：222222 &nbsp;&nbsp; <el-button size="mini" @click="modifyVisible =true">修改</el-button></p><br>
                           <p>包裹状态：222222</p><br>
                           <p>收货人：222222</p><br>
                           <p>收货人电话：13812345678</p><br>
                           <p>收货人地址：222222</p><br>
                        </el-col>
                        <el-col :span="14">
                           <p>顺丰速运 已收取快件</p><br>
                           <p>2016-04-27 21:00:00   快件离开【上海徐汇田林营业部】,正发往 【上海虹桥集散中心2】</p><br>
                           <p>2016-04-27 21:52:00   快件离开【上海虹桥集散中心2】,正发往下一站</p><br>
                           <p>2016-04-28 01:40:00   快件离开【苏州昆山集散中心】,正发往下一站</p><br>
                           <p>2016-04-28 04:56:00   快件离开【苏州吴中集散中心】,正发往 【苏州工业园苏利达服饰营业点】</p><br>
                           <p>2016-04-28 09:32:00   快件到达顺丰合作点【苏州大学独墅湖校区一期炳麟图书馆咖啡吧】,请携带有效证件前往自取</p><br>
                           <p>2016-04-28 15:00:00   正在派送途中,请您准备签收(派件人:范猛,电话:18962141940)</p><br>
                           <p>2016-04-28 19:05:00   已签收,感谢使用顺丰,期待再次为您服务</p><br>
                        </el-col>
                    </el-row>
                 </div>
                <!--包裹信息-->
                <!-- <div style="padding: 20px 0 20px 100px;text-align:left">
                    <div style="margin-bottom:20px">
                        <span>包裹编号：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>交货单号：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>配送方式：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>配送商：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>运单号：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>包裹状态：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>收货人：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>收货人地址：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                </div>
                -->
            </template>

                <template>
                <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;border-bottom:1px solid #ccc">
                    <span>包裹2</span>
                </div>
                <!--商品信息-->
                <div style="text-align:left">
                    <el-table   :data="data1" style="width: 100%"  align="center" header-align="center" :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
                        <el-table-column type="index" label="行号" width="180"></el-table-column>
                        <el-table-column prop="tradeName" label="商品名称"></el-table-column>
                        <el-table-column prop="tradeNumber" label="商品编码"></el-table-column>
                        <el-table-column prop="specificationProperties" label="规格属性"></el-table-column>
                        <el-table-column prop="merchantCode" label="商户内码"></el-table-column>
                        <el-table-column prop="mainUnit" label="主计量单位"></el-table-column>
                        <el-table-column prop="purchaseQuantity" label="购买数量"></el-table-column>
                        <el-table-column prop="shipmentQuantity" label="发货数量"></el-table-column>
                    </el-table>
                    <!-- :tableHeaderList="tableHeaderList"       :tableList="logisticsProductData"-->
                    <!-- <jic-table :height="350" :operationWidth="300" :showSelection="false"   :showOperation="false" :showBatchDelete="false"></jic-table> -->
                </div>
                 <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;border-bottom:1px solid #ccc">
                    <span>进度详情</span>
                </div>
                 <div style="text-align:left;height:400px;padding-top:30px" >
                     <el-row :gutter="20">
                        <el-col :span="6" style="padding-left: 100px;text-align: left;">
                           <p>包裹编号：BGBH0001</p><br>
                           <p>配送商：顺风速递</p><br>
                           <p>运单号：222222 &nbsp;&nbsp; <el-button size="mini" @click="modifyVisible =true">修改</el-button></p><br>
                           <p>包裹状态：222222</p><br>
                           <p>收货人：222222</p><br>
                           <p>收货人电话：13812345678</p><br>
                           <p>收货人地址：222222</p><br>
                        </el-col>
                        <el-col :span="14">
                           <p>顺丰速运 已收取快件</p><br>
                           <p>2016-04-27 21:00:00   快件离开【上海徐汇田林营业部】,正发往 【上海虹桥集散中心2】</p><br>
                           <p>2016-04-27 21:52:00   快件离开【上海虹桥集散中心2】,正发往下一站</p><br>
                           <p>2016-04-28 01:40:00   快件离开【苏州昆山集散中心】,正发往下一站</p><br>
                           <p>2016-04-28 04:56:00   快件离开【苏州吴中集散中心】,正发往 【苏州工业园苏利达服饰营业点】</p><br>
                           <p>2016-04-28 09:32:00   快件到达顺丰合作点【苏州大学独墅湖校区一期炳麟图书馆咖啡吧】,请携带有效证件前往自取</p><br>
                           <p>2016-04-28 15:00:00   正在派送途中,请您准备签收(派件人:范猛,电话:18962141940)</p><br>
                           <p>2016-04-28 19:05:00   已签收,感谢使用顺丰,期待再次为您服务</p><br>
                        </el-col>
                    </el-row>
                 </div>
    <el-dialog title="修改配送信息" :visible.sync="modifyVisible" width="25%" center>
        <el-row>
            <el-form >
             <el-form-item label="配送商"    prop="distributor">
                <el-select v-model="data1.distributor"  placeholder="请输入" style="width:300px" > <!-- default-first-option filterable allow-create -->
                <el-option  label="全部" value="1"></el-option>
                </el-select>
            </el-form-item>
            </el-form>
        </el-row>

        <el-row>
            <el-form >
             <el-form-item label="运单号"    prop="WaybillNumber">
                 <el-input  v-model="data1.WaybillNumber"   placeholder="请输入" style="width:300px"></el-input>
            </el-form-item>
            </el-form>
        </el-row>

        <span slot="footer" class="dialog-footer">
            <el-button @click="modifyVisible = false">取 消</el-button>
            <el-button type="primary" @click="modifyVisible = false">确 定</el-button>
        </span>
    </el-dialog>
                <!--包裹信息-->
                <!-- <div style="padding: 20px 0 20px 100px;text-align:left">
                    <div style="margin-bottom:20px">
                        <span>包裹编号：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>交货单号：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>配送方式：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>配送商：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>运单号：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>包裹状态：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>收货人：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                    <div style="margin-bottom:20px">
                        <span>收货人地址：</span>
                        <span>{{item.packageListInfo.invoiceReceiverName}}</span>
                    </div>
                </div>
                -->
            </template>
        </div>
    </el-row>
    
</div>
</template>

<script>
import jicTable from "@/components/jicComponentGallery/jicTable";

export default {
    props: {
        orderNo: {
            type: String,
            default: ''
        },
    },

    components: {
        jicTable
    },

    data() {
        return {
            size: 'small',
            modifyVisible:false,
            data1:{
                WaybillNumber:'',
                distributor:'',
            },
            data1:[{
                tradeName:"男装 休闲九分裤(仿毛料) 407402",
                tradeNumber:"0284234898",
                specificationProperties:"颜色: 红，尺码: XL",
                merchantCode:"30245-43",
                mainUnit:"件",
                purchaseQuantity:"15",
                shipmentQuantity:"15", 
            }],
            logisticsProductData: [{
                    deliverNo: '111111',
                    invoiceReceiverName: '11111111'
                },
                {
                    deliverNo: '222222',
                    invoiceReceiverName: '222222'
                }
            ], // 物流信息-商品列表
            tableHeaderList: [{
                    prop: "deliverNo",
                    label: "行号",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "invoiceReceiverName",
                    label: "商品名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "deliverNo",
                    label: "商品编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "deliverNo",
                    label: "规格属性",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "deliverNo",
                    label: "货号",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "deliverNo",
                    label: "订购单位",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "deliverNo",
                    label: "发货数量",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "deliverNo",
                    label: "发货仓库",
                    minWidth: 100,
                    formatter: null
                }
            ],
        }
    },

    methods: {},
}
</script>

<style lang="scss" scoped>
.page {
    .pageContainer {
        background-color: #f0f3f4; //#f0f3f4

        .basicOrderInformation {
            margin-bottom: 20px;
            border: 1px solid #ccc;
            background-color: #fff;
            padding-bottom: 10px;
            font-size: 16px;
            overflow: hidden;

            .orderIndex {
                float: left
            }

            .orderIndexList {
                text-align: left;
                margin-bottom: 10px;
                padding-left: 90px
            }
        }

        .orderDetails {
            border: 1px solid #ccc;
            background-color: #fff;

            .settlementDetails {
                text-align: left;
                margin-bottom: 10px;
                padding-left: 90px
            }

        }
    }
}
</style>
